<?php

use kartik\popover\PopoverX;
use yii\helpers\Html;

/* @var $this \yii\web\View */
/* @var $content string */

?>
<style>
    .navbar{padding: 0;}
    .sidebar-toggle{padding: 15px 15px}
    .navbar-custom-menu{margin-right: 15px}
</style>

<header class="main-header">

    <?= Html::a('<span class="logo-mini">APP</span><span class="logo-lg">' . Yii::t('app.c2', 'Application Console') . '</span>', Yii::$app->homeUrl, ['class' => 'logo']) ?>

    <nav class="navbar navbar-static-top" role="navigation">

        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <i class="fa fa-bars"><!--Toggle navigation--></i>
        </a>

        <div class="navbar-custom-menu">

            <form class="form-inline">
                <?= PopoverX::widget([
                    'header' => '<img src="' . $directoryAsset . '/img/avatar.png" class="w-25" alt="User Image"/>',
                    'placement' => PopoverX::ALIGN_BOTTOM_RIGHT,
                    'headerOptions' => ['style' => 'text-align: center'],
                    'size' => 'md',
                    'content' => '<p class="text-justify">' .
                        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' .
                        '</p>',
                    'footer' => Html::a(Yii::t('app.c2', 'Logout'), ['/user/logout'], ['class' => 'btn btn-sm btn-outline-secondary']),
                    'toggleButton' => [
                        'label' => Yii::$app->user->username . Html::tag('span', '', ['class' => 'fas fa-lock']),
                        'class' => 'btn btn-outline-light my-2 my-sm-0'
                    ],
                    'pluginOptions' => [
                        'dialogCss' => ['z-index' => 1051], // will overlay the popover over the navbar
                    ]
                ]) ?>
            </form>
        </div>

    </nav>
</header>
